<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ECharts Pie Chart</title>

</head>
<body >

        <div id="pie" style="width: 800px; height: 650px; "></div>
        <div style="height: 50px;"></div>
        <div id="line" style="width: 800px; height: 650px;"></div>
        <div id="bar" style="width: 800px; height: 650px; "></div>
        <div id="scatter" style="width: 800px; height: 650px;"></div>



    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>
<!--    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>-->
    <script>
        window.addEventListener('resize', function () {
            lineChart.resize();
        });

        //pie图
        var chartDom = document.getElementById('pie');
        var myChart = echarts.init(chartDom);

        const option = {
            title: {
                text: '地区与该地区房子的数量',
                left: 'center'
            },
            legend: {
                top: 'bottom'
            },
            tooltip: {
                trigger: 'item'
            },
            toolbox: {
                show: true,
                feature: {
                    mark: { show: true },
                    dataView: { show: true, readOnly: false },
                    restore: { show: true },
                    saveAsImage: { show: true }
                }
            },
            series: [
                {
                    name: 'Nightingale Chart',
                    type: 'pie',
                    radius: [50, 250],
                    center: ['50%', '50%'],
                    roseType: 'area',
                    itemStyle: {
                        borderRadius: 8
                    },
                    data: []
                }
            ]
        };

        //折线图
        var lineDom = document.getElementById('line');
        var lineChart = echarts.init(lineDom);


        const lineOption = {
            title: {
                text: '距离地铁站的路程不同区间与其平均房价',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            xAxis: {
                type: 'category',
                data: []
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: [],
                    type: 'line'
                }
            ]
        };


        //柱状图
        var barDom = document.getElementById('bar');
        var barChart = echarts.init(barDom);

        const barOption = {
            title: {
                text: '房子规模与其价格',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            xAxis: {
                type: 'category',
                data: []
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: [],
                    type: 'bar'
                }
            ]
        };



    fetch("/echart").then(response => response.json()).then(res => {
        res.forEach(item =>{
             // console.log(item.region,item.regionNum)
            option.series[0].data.push({name: item.region, value: item.regionNum})
        })
        console.log(option)

        myChart.setOption(option);
    })


        //折线图
    fetch("/distance_avg_price").then(response => response.json()).then(res => {
        // console.log(res);
        const Distance_Range = res.map(v => v.distance_Range)
        // console.log(Distance_Range)
        lineOption.xAxis.data = Distance_Range;

        const Average_Price =res.map(v => v.average_Price);
        // console.log(Average_Price)
        lineOption.series[0].data = Average_Price

        lineChart.setOption(lineOption);

    })


        //条形图
        fetch("/layout_avg_price").then(response => response.json()).then(res => {
            console.log(res);
            const Room_Layout = res.map(v => v.room_Layout)
            console.log(Room_Layout)
            barOption.xAxis.data = Room_Layout;

            const Average_neaPrice =res.map(v => v.average_neaPrice);
            console.log(Average_neaPrice)
            barOption.series[0].data = Average_neaPrice

            barChart.setOption(barOption);
        })


    </script>
</body>
</html>